<template>
  <div class="page">
    <!-- banner 开始 -->
    <div class="banner">
      <!-- <img src="@/assets/images/goods/goods_banner.png" class="img" alt=""> -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        v-if="oInfo.goodsPics && oInfo.goodsPics.length"
      >
        <van-swipe-item
          v-for="(item, index) in oInfo.goodsPics || []"
          :key="index"
        >
          <li-image :src="item"></li-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- banner end -->

    <!-- 商品信息 开始 -->
    <div class="goods_info">
      <div class="top">
        <div class="left">
          <img src="@/assets/images/goods/icon.png" class="img" alt="" />
          <span class="unit">￥</span>
          <span class="num">{{ oInfo.activityPrice }}</span>
          <span class="old">￥{{ oInfo.sellPrice }}</span>
        </div>
        <div class="right">{{ oInfo.initAppointmentCnt }}人预定</div>
      </div>
      <div class="bottom">{{ oInfo.goodsName }}</div>
    </div>
    <!-- 商品信息 end -->

    <!-- 平台严选 开始 -->
    <div class="tip_box">
      <img src="@/assets/images/goods/icon_01.png" class="left_img" alt="" />
      <div class="list">
        <div class="cell">
          <img src="@/assets/images/goods/gou.png" class="img" alt="" />
          <span>严格审查</span>
        </div>
        <div class="cell">
          <img src="@/assets/images/goods/gou.png" class="img" alt="" />
          <span>1对1服务</span>
        </div>
        <div class="cell">
          <img src="@/assets/images/goods/gou.png" class="img" alt="" />
          <span>售后无忧</span>
        </div>
      </div>
    </div>
    <!-- 平台严选 end -->

    <!-- 适用机构 开始 -->
    <div class="hospital_list" v-if="hospitalList && hospitalList.length">
      <div class="head">
        <span class="name">适用机构</span>
        <nuxt-link :to="`/goods/hospital?id=${goodsId}`" class="a_link">
          <span>共{{ hospitalList.length }}家医院可使用</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </div>
      <div class="list_box">
        <template v-for="(item, index) in hospitalList">
          <HospitalTwo :key="index" :info="item" v-if="index < 3"></HospitalTwo>
        </template>
      </div>
    </div>
    <!-- 适用机构 end -->

    <!-- 商品介绍 开始 -->
    <div class="introduction">
      <div class="head">
        <span class="name">商品介绍</span>
      </div>
      <div class="content" v-html="oInfo.detailIntroduce"></div>
    </div>
    <!-- 商品介绍 end -->

    <!-- 悬浮菜单 开始 -->
    <fixed-menu source="goods" :id="goodsId" :click="bookEvent">
      <div slot="tips" class="fix_tips">
        <span>线上支付：</span>
        <span class="num">￥0.00</span>
        <span>到店支付：</span>
        <span class="num">￥{{ oInfo.activityPrice }}</span>
      </div>
    </fixed-menu>
    <!-- 悬浮菜单 end -->

    <!-- 医院弹框 开始 -->
    <van-popup v-model="showPopup" position="bottom" round>
      <div class="van_popup">
        <div class="head">
          <div class="avatar">
            <li-image :src="getLogo()" class="img" v-if="getLogo()"></li-image>
            <img
              src="@/assets/images/avatar/goods_default.png"
              class="img"
              alt=""
              v-else
            />
          </div>
          <div class="info">
            <div class="price">
              <span class="num">￥{{ oInfo.activityPrice }}</span>
              <span class="old">￥{{ oInfo.sellPrice }}</span>
            </div>
            <div class="name">{{ oInfo.goodsName }}</div>
          </div>
        </div>

        <div class="van_title">选择医院</div>
        <div class="van_content">
          <div
            class="cell"
            :class="hospitalId == item.id ? 'cell_active' : ''"
            v-for="(item, index) in oInfo.hospitalList || []"
            :key="index"
            @click="choosHospital(item)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>

        <div class="van_btn">
          <!-- <button class="btn">确定</button>  -->
          <van-button class="btn" :disabled="!hospitalId" @click="lookDetail"
            >确定</van-button
          >
        </div>
      </div>
    </van-popup>
    <!-- 医院弹框 end -->
  </div>
</template>
  <script>
import HospitalTwo from "@/components/hospital/hospital_two.vue";
import { GET_GOODS_INFO, GET_GOODS_HOSPITALS } from "@/http/interface";
import { Swipe, SwipeItem, Popup } from "vant";
export default {
  components: {
    HospitalTwo,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popup.name]: Popup,
  },
  data() {
    return {
      goodsId: "",
      oInfo: {},
      hospitalList: [],
      title: "",
      description: "",
      keywords: "",
      showPopup: false,
      hospitalId: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link: [{ ref: "canonical", href: `${this.$domain}/goods/detail/${this.goodsid}` }],
    };
  },
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_GOODS_INFO, { params: _params });
    let oInfo = res.data || {};

    // 适用机构
    let h = await $axios.get(GET_GOODS_HOSPITALS, { params: _params });
    let hospitalList = h.data || [];
    console.log(h);

    console.log(oInfo);
    return {
      goodsId: params.id,
      oInfo,
      hospitalList,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
    };
  },
  methods: {
    // 立即预约
    bookEvent() {
      let o = this.oInfo;
      let list = o.hospitalIds || [];

      // 如果有两个以上的医院，则需要弹框选择
      if (list && list.length > 1) {
        this.showPopup = true;
        return false;
      }

      this.hospitalId = list[0] ? list[0] : "";
      this.$router.push({
        path: "/hospital/book",
        query: {
          source: "goods",
          id: this.goodsId,
          hospitalId: this.hospitalId,
        },
      });
    },

    // 选择医院
    choosHospital(row) {
      this.hospitalId = row.id;
    },

    // 查看详情
    lookDetail() {
      let id = this.hospitalId;
      this.$router.push({
        path: "/hospital/book",
        query: { source: "goods", id: this.goodsId, hospitalId: id },
      });
    },

    // 获取商品logo
    getLogo() {
      let o = this.oInfo || {};
      let arr = o.goodsPics || [];
      let logo = arr[0] || "";
      return logo;
    },
  },
};
</script>
  <style lang="less" scoped>
@import "/assets/styles/goods/detail.less";
</style>